<template>
  <section class="steps">
    <template v-for="($item, $index) in steps" :key="$index">
      <article :class="{ step: true, active: $index < active }">
        <i>{{ $index + 1 }}</i>
        <h5>{{ $item.text }}</h5>
        <span v-if="$index < stepLen - 1" class="step-line"> </span>
      </article>
    </template>
  </section>
</template>
<script setup>
import { computed } from 'vue';

const props = defineProps({
  //当前激活步骤
  active: {
    type: Number,
    required: true,
  },
  //几步
  steps: {
    type: Array,
    required: true,
  },
});
const active = computed({
  get() {
    return props.active;
  },
});
const steps = computed({
  get() {
    return props.steps;
  },
});
const stepLen = computed({
  get() {
    return props.steps.length;
  },
});
</script>
<style scoped lang="scss">
.steps {
  display: flex;
  align-items: center;

  .step-line {
    background: #eaeaea;
    height: 3px;
    display: inline-block;
    flex: 1;
    margin-left: 16px;
    margin-right: 16px;
    transform: scaleY(0.5);
  }
  .step {
    display: flex;
    align-items: center;
    flex: 1;
    i {
      display: flex;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      background: #eeeff2;
      justify-content: center;
      align-items: center;
      font-style: normal;
      color: #6b6d70;
      font-size: 20px;
      font-style: normal;
      font-weight: 700;
      line-height: 140%; /* 28px */
    }
    &.active {
      i {
        background: #575460 ;
        color: #fff;
      }
    }
    h5 {
      color: #010205;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      margin: 0 0 0 16px;
    }
  }
}
</style>